  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>sui下来刷新页面</title>
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
	
</head>

<body>
<div class="page">
	

	<header class="bar bar-nav">
	    <h1 class='title'>下拉刷新</h1>
	</header>
	<!-- content应该拥有"pull-to-refresh-content"类,表示启用下拉刷新 -->
	<div class="content pull-to-refresh-content" data-ptr-distance="55">
	    <!-- 默认的下拉刷新层 -->
	    <div class="pull-to-refresh-layer">
	        <div class="preloader"></div>
	        <div class="pull-to-refresh-arrow"></div>
	    </div>
	    <!-- 下面是正文 -->
	    <div class="card-container">
	        <div class="card">
	            <div class="card-header">card</div>
	            <div class="card-content">
	                <div class="card-content-inner">
	                    这里是第1个card，下拉刷新会出现第2个card。
	                </div>
	            </div>
	        </div>
	    </div>
	</div>

</div>



	<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.js' charset='utf-8'></script>
	<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.js' charset='utf-8'></script>
	<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>
	<script>
		
		/*// 添加'refresh'监听器
		$(document).on('refresh', '.pull-to-refresh-content',function(e) {
		    // 模拟2s的加载过程
		    setTimeout(function() {
		        var cardNumber = $(e.target).find('.card').length + 1;
		        var cardHTML = '<div class="card">' +
		                          '<div class="card-header">card'+cardNumber+'</div>' +
		                          '<div class="card-content">' +
		                            '<div class="card-content-inner">' +
		                                '这里是第' + cardNumber + '个card，下拉刷新会出现第' + (cardNumber + 1) + '个card。' +
		                            '</div>' +
		                          '</div>' +
		                      '</div>';
		
		        $(e.target).find('.card-container').prepend(cardHTML);
		        // 加载完毕需要重置
		        $.pullToRefreshDone('.pull-to-refresh-content');
		    }, 2000);
		});*/
		  //下拉刷新页面
  $(document).on("refresh", ".pull-to-refresh-content", function(e) {
    var $content = $(this);
      // 模拟2s的加载过程
      $.ajax({
      	type:"get",
      	url:"index.json",
      	async:true,
      	dataType:'json',
      	success:function(data){
      		console.log(typeof data);
      		 var cardHTML = '<div class="card">' +
	          '<div class="card-header">标题</div>' +
	          '<div class="card-content">' +
	          '<div class="card-content-inner">' +data.money+
	          '</div>' +
	          '</div>' +
	          '</div>';
	
	        $content.find('.card-container').prepend(cardHTML);
	        // $(window).scrollTop(0);
	        // 加载完毕需要重置
	        console.log(data.moeny);
	        $.pullToRefreshDone($content);
      	},
      	error:function(err){
      		console.log(err);
      	}
    //  });
     /* setTimeout(function() {
        var cardHTML = '<div class="card">' +
          '<div class="card-header">标题</div>' +
          '<div class="card-content">' +
          '<div class="card-content-inner">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容' +
          '</div>' +
          '</div>' +
          '</div>';

        $content.find('.card-container').prepend(cardHTML);
        // $(window).scrollTop(0);
        // 加载完毕需要重置
        $.pullToRefreshDone($content);
      }, 2000);*/
    });
  });

$.init();
	</script>
</body>
</html>